<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import { ContentWrap } from '#/components/content-wrap';
import { Tabs, TabPane } from 'ant-design-vue';
import { ref } from 'vue';
import DressBooking from './components/DressBooking.vue';
import MakeupBooking from './components/MakeupBooking.vue';
import PhotoBooking from './components/PhotoBooking.vue';

const activeTab = ref('dress');
</script>

<template>
  <Page auto-content-height>
    <ContentWrap title="预约中心">
      <Tabs v-model:activeKey="activeTab" type="card">
        <TabPane key="dress" tab="婚纱预约">
          <DressBooking />
        </TabPane>
        <TabPane key="makeup" tab="化妆预约">
          <MakeupBooking />
        </TabPane>
        <TabPane key="photo" tab="摄影预约">
          <PhotoBooking />
        </TabPane>
      </Tabs>
    </ContentWrap>
  </Page>
</template>

